<template>
	<view>
		<view v-if="value" class="ray-msg-mask" @click="closePopMask"></view>
		<view v-if="value" class="ray-msg-content">
			<view v-if="showClose" @click="closePop"
			class="iconfont icon-delete">
				
			</view>
			<view v-if="title" class="ray-msg-title">{{title}}</view>
			<view class="fixed-msg-info" v-if="info">{{info}}</view>
			<slot name="content"></slot>
			<view class="commit-box">
				<slot name="commit">
					<view class="btn" @click="closePop">
						{{cancelText}}
					</view>
					<view class="btn yes" @click="onConfirm">
						{{confirmText}}
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "yangr-msg",
		//属性
		props: {
			value:{
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "" // title 为空时根据 type ，显示"操作成功"/"操作失败"
			},
			type: {
				type: String, // success or error
				default: "" // 默认值
			},
			info: {
				type: String,
				default: "" // info 为空时不显示
			},
			cancelText: {
				type: String,
				default: "取消"
			},
			confirmText: {
				type: String,
				default: "确认"
			},
			showClose: {
				type: Boolean,
				default: false // 是否显示右上角关闭按钮
			},
		},
		//组件生命周期
		created: function(e) {
		},
		methods: {
			onConfirm(){
				this.$emit("onConfirm", '');
			},
			closePop(){
				this.$emit("input", false);
			},
			closePopMask(){
				if(!this.showClose){
					this.closePop()
				}
			}
		}
	}
</script>

<style lang="scss">
	@import './yangr-msg.scss';
</style>
